<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    	<style>
    		.itembox{opacity:1!important;}
    	</style>
    <![endif]-->
    <link rel="stylesheet" href="/resources/css/postModal.css?20150424">
	<link rel="stylesheet" href="/resources/css/postbox-viewer.css?20141022">
    <style type="text/css">
		#lastDataDis{
			text-align: center;
			width: 100%;
			height: 30px;
			position: relative;
			margin: 20px auto;
			display: none;
		}
		#lastDataDis h5{
			color: #808080;
			font-weight: bold;
		}
		#lastDataDis div{
			width: 100%;
			height: 2px;
			background-color: #ddd;
			border-bottom: 1px solid #ffffff;
		}
		#notLoadData{
			text-align: center;
			width: 100%;
			display: none;
		}
		.result-top-menu{
			width: 100%;
			height: 60px;
			position: relative;
			overflow: hidden;
			margin: 15px auto;
			max-width: 1765px;
		}
		.result-top-menu .result-line{
			position: absolute;
			top: 30px;
			left: 0;
			width: 100%;
			height: 2px;
			z-index: -1;
		}
		.result-top-menu .result-count{
			color: #8d8d8d;
			margin-top: 20px;
			float: left;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
		}
		.result-top-menu .result-right-button{
			margin-top: 15px;
			float: right;
		}
		.result-top-menu .result-right-button button{
			border: 1px solid #ccc;
			border-radius: 4px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
			background-color: #ebebeb;
			background: linear-gradient(#fff, #f0f0f0);
			padding: 6px 10px;
			color: #8d8d8d;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
			font-size: 13px;
		}
		#select-color{
			height: 25px;
			margin-bottom: 7px;
		}
		#select-color > div{
			float: left;
			width: 25px;
			height: 25px;
			display: block;
			border: 1px solid #ccc;
			margin-right: 5px;
			margin-bottom: 5px;
			cursor: pointer;
		}
		.gender-category > li{padding: 3px 20px;cursor: pointer;}
		.gender-category > li:hover,#select-category > li:focus{ background-color:#eee;}
		.color-wrapper{
			-webkit-transition: all 0.4s;
	    	-moz-transition: all 0.4s;
	    	-o-transition: all 0.4s;
	    	transition: all 0.4s;
		}
		.iradio_square-blue{ display:none!important;}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->

<!-- content -->
<div style="margin-top:25px;padding:0 15px;">
	<div style="text-align: center;">
		<h3 style="padding-top: 20px; font-weight: bold;">색상</h3>
	</div>
	<div style="margin: 25px auto 0 auto; max-width: 1765px;">
		<div class="color-wrapper">
			<p>색상을 선택해 주세요 :</p>
			<div id="select-color">
				<div title="검정" data-color="black" style="background-color:black;"></div>
				<div title="흰색" data-color="white" style="background-color:white;"></div>
				<div title="파랑" data-color="blue" style="background-color:blue;"></div>
				<div title="하늘" data-color="skyblue" style="background-color:skyblue;"></div>
				<div title="노랑" data-color="yellow" style="background-color:yellow;"></div>
				<div title="빨강" data-color="red" style="background-color:red;"></div>
				<div title="회색" data-color="gray" style="background-color:gray;"></div>
				<div title="베이지" data-color="beige" style="background-color:beige;"></div>
				<div title="녹색" data-color="green" style="background-color:green;"></div>
				<div title="브라운" data-color="brown" style="background-color:brown;"></div>
				<div title="보라" data-color="purple" style="background-color:purple;"></div>
				<div title="핑크" data-color="hotPink" style="background-color:HotPink;"></div>
				<div title="민트" data-color="mint" style="background-color:MediumAquaMarine"></div>
			</div>
			<div class="clearfix"></div>
			<div id="colorOption" style="display: none;margin-top:15px;">
				<p>검색도구 :</p>
				<div style="margin-top:10px;">
					<ul class="list-inline">
						<li class="dropdown" style="background-color: transparent!important;"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none;"><spring:message code="common.gender"/> <b class="caret"></b></a>
							<ul class="dropdown-menu" id="select-gender" style="border-radius:0;min-width:100px;">
								<li data-value="<spring:message code='common.female' text='여성' />"><a href="#"><spring:message code="common.female" text="여성" /></a></li>
								<li data-value="<spring:message code='common.male' text='남성' />"><a href="#"><spring:message code="common.male" text="남성" /></a></li>
							</ul>
						</li>
						<li class="dropdown" id="womens-category" style="background-color: transparent!important; display: none;"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none;"><spring:message code="post.upload.category"/> <b class="caret"></b></a>
							<ul class="dropdown-menu gender-category" style="border-radius:0;">
								<li data-value="w_clothes" data-name='<spring:message code="categoryView.w_clothes"/>'><spring:message code="categoryView.w_clothes"/></li>
								<li data-value="w_footwear" data-name='<spring:message code="categoryView.w_footwear"/>'><spring:message code="categoryView.w_footwear"/></li>
								<li data-value="w_bag" data-name='<spring:message code="categoryView.w_bag"/>'><spring:message code="categoryView.w_bag"/></li>
								<li data-value="w_accessory" data-name='<spring:message code="categoryView.w_accessory"/>'><spring:message code="categoryView.w_accessory"/></li>
							</ul>
						</li>
						<li class="dropdown" id="mens-category" style="background-color: transparent!important; display: none;"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none;"><spring:message code="post.upload.category"/> <b class="caret"></b></a>
							<ul class="dropdown-menu gender-category" style="border-radius:0;">
								<li data-value="m_clothes" data-name='<spring:message code="categoryView.m_clothes"/>'><spring:message code="categoryView.m_clothes"/></li>
								<li data-value="m_footwear" data-name='<spring:message code="categoryView.m_footwear"/>'><spring:message code="categoryView.m_footwear"/></li>
								<li data-value="m_bag" data-name='<spring:message code="categoryView.m_bag"/>'><spring:message code="categoryView.m_bag"/></li>
								<li data-value="m_accessory" data-name='<spring:message code="categoryView.m_accessory"/>'><spring:message code="categoryView.m_accessory"/></li>
							</ul>
						</li>
						<li onclick="searchInit();" id="search-reset"style="cursor: pointer;display:none;">초기화</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="result-top-menu">
		<div class="result-line" style="padding-left: 50px; padding-right: 130px;"><div style="margin:0 auto; overflow: hidden; height: 2px; background-color: #ddd; border-bottom: 1px solid #fff;"></div></div>
		<div class="result-count">총 <span style="color: #58778f; font-weight: bold;" id="resultCount">0</span>개</div>
		<div class="result-right-button">
			<button type="button" style="border-top-right-radius: 0; border-bottom-right-radius: 0; color:#353535; font-weight: bold;" onclick="order(this, 'latest');">최신순</button>
			<button type="button" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px;" onclick="order(this, 'popular');">인기순</button>
		</div>
	</div>
	<div id="itemList"></div>
	<div id="lastDataDis"><div></div><h5><i class="glyphicon glyphicon-ok"></i>&nbsp;모두 불러왔습니다</h5></div>
	<div id="notLoadData">
		<p><i class="glyphicon glyphicon-remove" style="font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);"></i>
		<h5>서버문제로 게시글을 불러올 수 없습니다</h5>
		<button onclick="location.reload(true)" class="btn btn-default btn-sm">다시시도</button>
	</div>
</div>

<!-- report dialog -->
<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report-form" method="post">
			<input type="hidden" id="report-idx" name="report-idx">
			<input type="hidden" id="report-type" name="report-type">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">신고하기</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="report-reason">이 게시물을 신고하는 이유가 무엇인가요?</label>
					<select class="selectpicker show-tick" id="report-reason" name="report-reason" title="선택" data-width="100%">
						<option value="spam">스팸 및 광고</option>
						<option value="improper">부적절한 주제</option>
						<option value="steal">도용 및 저작권 침해</option>
						<option value="speech">욕설 및 불편한 언어</option>
						<option value="porno">음란성</option>
						<option value="other">기타</option>
					</select>
				</div>
				<div class="form-group">
					<label for="report-opinion">추가의견</label>
					<textarea id="report-opinion" name="report-opinion" class="form-control" rows="3" cols="250" maxlength="200" style="resize:none;"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-primary btn-lg btn-block" onclick="report_submit(this);">보내기</button>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- report dialog -->

<div class="modal" id="post-modal" style="cursor:-webkit-zoom-out;">
	<button type="button" class="close" id="post-modal-close" title="닫기"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<div style="width: 1000px; margin: 25px auto; padding: 0; cursor: default;">
		<div id="post-viewer"></div>
	</div>
</div><!-- /.modal-dialog -->
<div class="modal-backdrop in" id="post-backdrop" style="display: none; filter: alpha(opacity=85); opacity: .85; background-color: #d0d0d0;"></div>
<!-- share dialog -->
<div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report_form" method="post">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>공유하기</h4>
			</div>
			<div class="modal-body">
				<p>공유할 사이트를 선택 :</p> 
				<ul class="list-inline share-list">
					<li><a href="javascript:fb_share();" title="페이스북으로 공유하기" style="display: block;"><img src="/resources/img/icon/share-facebook-icon.png" width="32px" height="32px"></a></li>
					<li><a href="javascript:twitter_share();" title="트위터로 공유하기" style="display: block;"><img src="/resources/img/icon/share-twitter-icon.png" width="32px" height="32px"></a></li>
					<li><a id="google-share" title="구글플러스로 공유하기" href="" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" style="display: block;"><img src="/resources/img/icon/share-googleplus-icon.png" width="32px" height="32px"></a></li>
					<li><a id="mail-share" href="" target="_blank" title="이메일로 공유하기"><img src="/resources/img/icon/share-email-icon.png" width="32px" height="32px"></a>
					<li><a id="kakao-link-btn" href="javascript:;" title="카카오로 공유하기" style="display: none;"><img width="34px;" height="34px;" src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" style="margin-left:2px;" /></a></li>
				</ul>
				<div>
					<p>또는 포스트 링크 복사</p>
					<input type="text" id="input_urlCopy" class="form-control" readonly="readonly" value="" onclick="this.select();" style="background-color: #fff; cursor: text;">
				</div>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- share dialog -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script src="/resources/js/modernizr.custom.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.js"></script>
<script src="/resources/js/classie.js"></script>
<script src="/resources/js/AnimOnScroll.js"></script>
<input type="hidden" id="share-url">
<input type="hidden" id="share-title">
<input type="hidden" id="share-image1">
<input type="hidden" id="share-content">
<script type="text/javascript">
	var index = 0;
	var hasPost = true;
	var member_idx = "${userDto.idx}";
	var member_id = "${userDto.id}";
	var member_name = "${userDto.name}";
	var member_profile = "${userDto.profileImage}";
	var order_type = "latest";
	var color = "";
	var category = "";
	var is_mobile = isMobile();
	var loading = true;
	
   	$(function(){
   		
   		$("#report-reason").selectpicker();
   		
   		$("#select-color > div").click(function(){
   			index = 0;
   			$('#itemList').masonry("destroy");
   			$("#lastDataDis").hide();
   			$(".colorOptionBtn").show();
  			$("#select-color > div").each(function(){
  				$(this).empty();
  			});
  			if($(this).data("color") == "white" || $(this).data("color") == "yellow" || $(this).data("color") == "beige"){
  				$(this).html("<i class='fa fa-check' style='color:#000; font-size:16px;'></i>");
  			}else{
  				$(this).html("<i class='fa fa-check' style='color:#fff; font-size:16px;'></i>");
  			}
  			color = $(this).data("color");
  			$("#itemList").empty();
  			loadColorPost();
  			$("#colorOption").show();
  		});
   		$("#select-gender > li").click(function(){
   			var el = $(this).children("a");
   			if($(this).index() == 0){
   				$(this).next().children("a").html("<spring:message code='common.male' text='남성' javaScriptEscape="true" />");
   				category = "w_all";
   				$("#womens-category").fadeIn();
   				$("#mens-category").hide();
   			}else{
   				$(this).prev().children("a").html("<spring:message code='common.female' text='여성' javaScriptEscape="true" />");
   				category = "m_all";
   				$("#mens-category").fadeIn();
   				$("#womens-category").hide();
   			}
   			el.html("<i class='fa fa-check'></i> "+$(this).data("value"));
   			index = 0;
   			$("#itemList").empty();
   			loadColorPost();
   		});
   		$(".gender-category > li").click(function(){
   			$(this).parent().children("li").each(function(){
   				$(this).removeClass("select");
   			});
   			$(this).addClass("select");
   			$(this).parent().children("li").each(function(){
   				if($(this).hasClass("select")){
   					$(this).html("<i class='fa fa-check'></i> "+$(this).data("name"));
   	   			}else{
   	   				$(this).html($(this).data("name"));
   	   			}
   			});
   			category = $(this).data("value");
   			index = 0;
   			$("#itemList").empty();
   			loadColorPost();
   			$("#search-reset").show();
   		});
   	});
   	
   	function searchInit(){
   		$("#select-gender > li:first").children("a").html("<spring:message code='common.female' text='여성' javaScriptEscape="true" />");
   		$("#select-gender > li").eq(1).children("a").html("<spring:message code='common.male' text='남성' javaScriptEscape="true" />");
   		$(".gender-category > li").each(function(){
   			$(this).html($(this).data("name"));
   		});
   		index = 0;
   		category="";
		$("#itemList").empty();
		loadColorPost();
		$("#search-reset").hide();
   	}
   	
   	function loadColorPost(){
   		var data = "index="+index+"&color="+color+"&category="+category+"&order_type="+order_type;
   		if(color != ""){
   			$.ajax({
   	   			type : "get"
   			    , url : "/loadColorPost"
   			    , data : data
   			    , dataType : "json"
   			    , error : function() {
   			    	$("#notLoadData").show();
   			    }
   			    , success : function(response) {
   			    	if(index == 0){ getColorResultCount(); }
   			    	if(response.length == 0 && index == 0){
   			    		$("#itemList").html("<center><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i><br><h4 class='nanum' style='font-weight: bold; color:#3A404C;'>등록된 포스트가 없습니다</h4></center>");
   			    		hasPost = false;
   			    		return false;
   			    	}else{
   		    			if(response.length != 0){
   		    				if(response.length < 20){
   		    					$("#lastDataDis").show();
   				    			hasPost = false;
   		    				}
   		    				var html = "";
   	 			    		for(var i=0;i<response.length;i++){
	   	 			    		var likeBtnStyle = "";
	 			    			var comment = "";
	 			    			if(response[i].likeState == "like"){ likeBtnStyle = "style='color: #cc2e35;'"; }
	 			    			if(response[i].comment_cnt != 0){
	 			    				comment += "<div style='width: 93%; margin: 8px auto; border-bottom :1px solid #f3f3f3;'></div><div class='comment-list'>";
	 			    				for(var k=0;k<response[i].comment.length;k++){
	 			    					comment += "<div class='comment'><div title='"+response[i].comment[k].author+"' class='comment-profile'><a href='/"+response[i].comment[k].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].comment[k].profileImage+"'></a></div><div class='comment-right' title='"+response[i].comment[k].create_date+"'><div class='comment-author'><a href='/"+response[i].comment[k].member_id+"'>"+response[i].comment[k].author+"</a></div><div class='comment-content'>"+parseContent(response[i].comment[k].content).parseEmoji()+"</div></div></div>";
				    					}
	 			    				comment += "</div>";
	 			    			}
	 			    			html += "<div class='itembox' data-idx='"+response[i].idx+"'><div class='item'><div class='item-image'><div class='item-function'><button type='button' class='likeBtn' title='좋아요' onclick='like(this,"+response[i].idx+","+response[i].member_idx+",\""+response[i].image1+"\",\""+response[i].url+"\")'><i class='fa fa-heart' "+likeBtnStyle+"></i></button><button type='button' title='공유하기' onclick='post_share(\""+shareParse(response[i].content)+"\", \""+shareParse(response[i].title)+"\", \""+response[i].image1+"\", \""+response[i].url+"\");'><i class='fa fa-share'></i></button></div><a href='/p/"+response[i].url+"' data-target='post' style='display: block;'><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'></a></div><div class='item-profile'><div class='profile-img' data-memidx='"+response[i].member_idx+"'><a href='/"+response[i].member_id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div><div class='profile-info'><p class='profile-name'><a href='/"+response[i].member_id+"'>"+response[i].author+"</a></p><p class='profile-time'>"+timeleft(response[i].create_date)+"</p></div></div><div class='item-content'>"+parseContent(response[i].content.parseEmoji())+"</div><div class='item-info'><p style='float:left;'><i class='fa fa-heart'></i>&nbsp;<span class='like_cnt'>"+response[i].like_cnt+"</span><i class='fa fa-comment'></i>&nbsp;<span class='comment_cnt'>"+response[i].comment_cnt+"</span></p><p style='float:right; cursor:pointer;' title='신고하기' onclick='report("+response[i].idx+")'><i class='fa fa-flag'></i></p></div><div class='clearfix'></div>"+comment+"</div></div>";
	   	 			    	}
   	 			    		$("#itemList").append(html);
	   	 			    	new AnimOnScroll(document.getElementById("itemList"), {
	 			    			minDuration : 0.4,
	 			    			maxDuration : 0.7,
	 			    			viewportFactor : 0.2
	 			    		});
   			    		}else{
   			    			$("#lastDataDis").show();
   			    			hasPost = false;
   			    		}
   		    			$("#notLoadData").hide();
   			    	}
   			    }
   			    , beforeSend: function() {
   			    	$("#ajax-spinner").show();
   			    }
   			    , complete: function() {
   			    	$("#ajax-spinner").hide();
   			    	loading = true;
   			    }
   			});
   		}
   	}
   	
   	function getColorResultCount(){
   		var data = "color="+color+"&category="+category;
   		$.ajax({
   			type : "get"
		    , url : "/getColorResultCount"
		    , data : data
		    , dataType : "text"
		    , success : function(count) {
		    	$("#resultCount").html(count);
		    }
   		});
   	}
   	
   	function like(button, post_idx, author_idx, refer_img, refer_url){
   		if (!member_idx) {
            alertShow("danger", "로그인이 필요합니다", 2000);
        } else {
        	var data = "post_idx="+post_idx+"&author_idx="+author_idx+"&refer_img="+refer_img+"&refer_url="+refer_url;
        	$(button).html("<img src='/resources/img/default-btn-loading.gif'>");
        	setTimeout(function(){
       			$.ajax({
	                type: "post",
	                url: "/addLike",
	                data: data,
	                dataType: "text",
	                timeout: 5000,
	                error: function () {
	                    alertShow("danger", "다시 시도해주세요", 2000);
	                },
	                success: function (response) {
	                    if (response == "unlike") {
	                    	$(button).html("<i class='fa fa-heart'></i>")
	                    	.parent().parent().parent().children("div.item-info").find("span.like_cnt").html(parseInt($(button).parent().parent().parent().children("div.item-info").find("span.like_cnt").html())-1);
	                    } else if (response == "execute") {
	                    	$(button).html("<i class='fa fa-heart' style='color: #cc2e35;'></i>")
	                    	.parent().parent().parent().children("div.item-info").find("span.like_cnt").html(parseInt($(button).parent().parent().parent().children("div.item-info").find("span.like_cnt").html())+1);
	                    } else {
	                    	$(button).html("<i class='fa fa-heart'></i>");
	                        alert('잘못된 접근입니다');
	                    }
	                }
	            });
        	}, 1000);
        }
    }
   	
   	function report(idx, type){
   		if(type=="comment"){
			$("#report-reason").prev().html("이 댓글을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("comment");
		}else{
			$("#report-reason").prev().html("이 게시물을 신고하는 이유가 무엇인가요?");
			$("#report-type").val("post");
		}
   		$("#report-idx").val(idx);
   		$("#report-modal").modal("show");
   	}
   	
   	$(window).scroll(function(event){
   		if(hasPost && !is_mobile){
   			if($(window).scrollTop() > ($(document).height()-$(window).height()-350)){
    			NProgress.set(0.0);
   	    		index += 25;
   	    		loadColorPost();
       		}
   		}
   	});
   	
   	function post_share(content, title, image1, url){
   		$("#input_urlCopy").val(location.host+"/p/"+url);
   		$("#google-share").attr("href", "https://plus.google.com/share?url={"+location.host+"/p/"+url+"}");
   		$("#mail-share").attr("href", "mailto:?subject="+title+"&body="+content+"%0D%0AURL : "+location.host+"/p/"+url);
   		$("#share-url").val(location.host+"/p/"+url);
   		$("#share-title").val(title);
   		$("#share-image1").val(location.host+"/resources/upload/post/thumbnail/"+image1);
   		$("#share-content").val(content);
   		if(isMobile()){
   		    $("#kakao-link-btn").show();
   		}
   		$("#share-modal").modal("show");
   		Kakao.Link.createTalkLinkButton({
   	   		container: '#kakao-link-btn',
   	   		label: 'Faeple on Style : '+title,
   	   		image: {
   	   			src: image1,
   	   			width: '300',
   	   			height: '200'
   	   		},
   	   		webButton: {
   	   			text: 'Faeple.com 이동',
   	   			url: location.host+"/p/"+url
   	   		}
   	   	});
   	}
   	
   	function fb_share(){
   		var content = $("#share-content").val();
   		var url = $("#share-url").val();
   		var obj = {
   			method: "feed",
   			link: url,
   			picture: $("#share-image1").val(),
   			name: $("#share-title").val(),
   			caption: url,
   			description: content
   		};
   		
   		function callback(response){
   			if(response && response.post_id){
   				alert('페이스북에 공유되었습니다');
   				$("#share-modal").modal("hide");
   			}
   		}
   		FB.ui(obj, callback);
   	}
   	function twitter_share(){
   		var content = "Faeple on Style : "+ $("#share-url").val();
   		var url = $("#share-url").val();
   		var link = "https://twitter.com/intent/tweet?text="+content+"&url="+url;
   		window.open(link,'트위터로 공유하기','scrollbars=no,toolbar=no,resizable=yes,width=600,height=260');
   	}
   	
   	function report_submit(obj){
		$(obj).html("전송중...").attr("disabled", "disabled");
		setTimeout(function(){
			$.ajax({
				type : "post"
			    , url : "/submitReport"
			    , dataType : "text"
			    , data : $("#report-form").serialize()
			    , timeout : 5000
			  	, error : function() {
			  		alertShow("danger", "다시 시도해주세요" ,1500);
			  		$(obj).html("보내기").removeAttr("disabled");
			    }
			    , success : function(response) {
			    	if(response){
			    		alertShow("success", "신고되었습니다" ,1500);
			    	}else{
			    		alertShow("danger", "다시 시도해주세요" ,1500);
			    	}
			    	$("#report-modal").modal("hide");
			    }
			 	, complete: function(){
			 		$(obj).html("보내기").removeAttr("disabled");
			 		$("#report-form")[0].reset();
			 	}
			});
		}, 800);
   	}
   	
   	function order(el, type){
		order_type = type;
		$("#itemList").empty();
		if(type== "latest"){
			$(el).css({"font-weight":"bold","color":"#353535"}).next().css({"font-weight":"normal","color":"#8d8d8d"});
		}else{
			$(el).css({"font-weight":"bold","color":"#353535"}).prev().css({"font-weight":"normal","color":"#8d8d8d"});
		}
		index = 0;
		setTimeout(function(){
			loadColorPost(index);
		},1000);
	}
</script>
<script type="text/javascript" src="/resources/js/swipe.js"></script>
<script type="text/javascript" src="/resources/js/postModal.js?20150424"></script>
</body>
</html>